<template>
    <div id="NightingaleChart">
        
    </div>
</template>

<script>
export default {
    name:'NightingaleChart',
    data() 
    {
        return {
            
        }
    },
    mounted() 
    {
        this.getLoadEcharts();
    },
    methods: {
        getLoadEcharts() 
        {
            var NightingaleChart = document.getElementById('NightingaleChart');
            var myChartNightingaleChart = this.$echarts.init(NightingaleChart);
            var option;
            option = {
                legend: {
                    top: 'bottom'
                },
                toolbox: {
                    show: true,
                    feature: {
                    mark: { show: true },
                    dataView: { show: false, readOnly: false }, //查看页面详细数据
                    restore: { show: false },  //刷新
                    saveAsImage: { show: false } //下载
                    }
                },
                series: [
                    {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    // radius: [50, 50],  //固定大小
                    center: ['50%', '50%'], //限制大小，开启会影响伸缩
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: [
                        { value: 40, name: 'rose 1' },
                        { value: 38, name: 'rose 2' },
                        { value: 32, name: 'rose 3' },
                        { value: 30, name: 'rose 4' },
                        { value: 28, name: 'rose 5' },
                        { value: 26, name: 'rose 6' },
                        { value: 22, name: 'rose 7' },
                        { value: 18, name: 'rose 8' }
                    ]
                    }
                ]
            }

            option && myChartNightingaleChart.setOption(option)

            //防止重复冲突
            window.addEventListener('resize', () => {
                myChartNightingaleChart.resize();
            }, false); // false代表事件句柄在冒泡阶段执行
        }

    }
}
</script>

<style lang="less" scoped>
    #NightingaleChart
    {
        min-height: 400px;
        width: 100%;
        height:100%;
        border-radius: 8px;
        box-shadow:0px 6px 10px #e7e7e7;
        border: 1px solid #e7e7e7;
        border-radius: 8px;
    }
</style>